<template>
	<view class="swiper-content">
		<swiper class="swiper-img" :current="currentImg" :duration="300" @change="changeSwiper" :autoplay="true">
			<swiper-item class="swiper-item" v-for="(item, index) in imgs" :key="index">
				<view class="img-page">
					<movable-area scale-area>
						<movable-view direction="all" scale="true" scale-min="1" scale-max="4">
							<image class="max-img" :src="item" :lazy-load="true" mode="aspectFill" />
						</movable-view>
					</movable-area>
				</view>
			</swiper-item>
		</swiper>
		<image :src="cloudStorage+'/tuji.png'" class="tips-img"></image>
		<view class="item-bottom">
			<scroll-view class="scroll-view_H " :scroll-x="true" :scroll-into-view="scrollTopIndex"
				:scroll-with-animation="true" scroll-left="20">
				<view class="scroll-view-item_H" :class="currentImg == index ? 'img-page-checked' : ''"
					v-for="(item, index) in imgs" :key="index" :id="`scrollToIndex${index}`" @click.stop="toImg(index)">
					<image class="scroll-img" :src="item" mode="widthFix" />
				</view>
			</scroll-view>
		</view>
		<!-- 	<view class="handle-wrap flex-j-sb--a-ct p-lr-32">
			<view class="w-64 h-64" @click="isScale = !isScale">
				<image v-show="isScale" class="w-64 h-64" src="./images/icon-scale-yes.png" mode="widthFix" />
				<image v-show="!isScale" class="w-64 h-64" src="./images/icon-scale.png" mode="widthFix" />
			</view>

			<view class="w-64 h-64" @click="isCollect = !isCollect">
				<image v-show="isCollect" class="w-64 h-64" src="./images/icon-collect-yes.png" mode="widthFix" />
				<image v-show="!isCollect" class="w-64 h-64" src="./images/icon-collect.png" mode="widthFix" />
			</view>

			<view class="w-64 h-64" @click="isLike = !isLike">
				<image v-show="isLike" class="w-64 h-64" src="./images/icon-like-yes.png" mode="widthFix" />
				<image v-show="!isLike" class="w-64 h-64" src="./images/icon-like.png" mode="widthFix" />
			</view>

			<image class="w-64 h-64" src="./images/icon-set-wallpaper.png" mode="widthFix" />
			<image class="w-64 h-64" src="./images/icon-share.png" mode="widthFix" />
			<image class="w-64 h-64" src="./images/icon-download.png" mode="widthFix" />
		</view>

		<view class="pop" v-if="isPop">
			<view class="item" @click.stop="share()">分享图片</view>
			<!-- #ifndef H5 -->
		<!-- <view class="item" @click.stop="saveImg(false)">保存图片</view>
		<view class="item" @click.stop="saveImg(true)">保存全部图片</view> -->
		<!-- #endif -->
		<!-- </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs: [
					"https://suzhouqu-static-1306862033.cos.ap-chengdu.myqcloud.com/suzhou_-district-data-resource-pool/swiper1.png",
					"https://suzhouqu-static-1306862033.cos.ap-chengdu.myqcloud.com/suzhou_-district-data-resource-pool/swiper2.png",
					"https://suzhouqu-static-1306862033.cos.ap-chengdu.myqcloud.com/suzhou_-district-data-resource-pool/swiper3.png",
					"https://suzhouqu-static-1306862033.cos.ap-chengdu.myqcloud.com/suzhou_-district-data-resource-pool/swiper4.png",
				],
				currentImg: 0,
				isPop: false,
				scrollTopIndex: "",

				isScale: false,
				isCollect: false,
				isLike: false,
			};
		},
		onLoad(options) {
			// let { imgs, current } = options;
			// this.imgs = JSON.parse(imgs);
			// this.currentImg = current;
		},
		methods: {
			changeSwiper(e) {
				this.currentImg = e.detail.current;
				this.scrollTopIndex = `scrollToIndex${e.detail.current}`;
			},
			toImg(index) {
				this.currentImg = index;
			},
			onBack() {
				uni.navigateBack();
			},
			share() {
				uni.downloadFile({
					// 下面一行时拼接预览PDF的地址！！！
					url: this.imgs[this.currentImg],
					success: function(res) {
						var filePath = res.tempFilePath;
						if (!filePath) return;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log(res);
								console.log("打开文档成功");
							},
						});
					},
				});
			},
			saveImg(isAll = false) {
				const that = this;
				if (!isAll) {
					uni.downloadFile({
						url: this.imgs[this.currentImg],
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											icon: "none",
											title: "保存成功",
										});
										that.isPop = false;
									},
									fail: function() {},
								});
							} else {}
						},
					});
					return;
				}
				this.imgs.forEach((item) => {
					uni.downloadFile({
						url: item,
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											icon: "none",
											title: "保存全部成功",
										});
										that.isPop = false;
									},
									fail: function() {},
								});
							} else {}
						},
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.swiper-content {
		width: 100%;
		height: 420rpx;
		position: relative;
		border-radius: 30rpx;
	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 100%;
		height: 100%;
	}

	movable-area {
		position: fixed;
		overflow: hidden;
		width: 100%;
		height: 100%;

		//transform: scale();
	}

	movable-view image {
		width: 100%;
	}

	uni-image>img {
		z-index: -1 !important;
	}

	.hander-top {
		position: absolute;
		z-index: 1000;
		top: 48rpx;
		left: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;

		.icon-back-wrap {
			width: 64rpx;
			height: 64rpx;

			.icon-back {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.count {
			box-sizing: border-box;
			padding: 8rpx 24rpx;

			color: #fff;
			border-radius: 24rpx;
			background: rgba(0, 0, 0, .4);

			font-size: 28rpx;
		}
	}

	.swiper-img {
		width: 100%;
		height: 420rpx;
		border-radius: 30rpx;

		.swiper-item {
			width: 100%;
			height: 420rpx;
			border-radius: 30rpx;

			.img-page {
				display: flex;
				align-items: center;
				width: 100%;
				height: 420rpx;
				border-radius: 30rpx;

				.max-img {
					width: 100%;
					height: 100%;
					border-radius: 30rpx;
				}
			}
		}
	}

	.handle-wrap {
		// position: absolute;
		// z-index: 100;
		// bottom: 40rpx;
		// left: 0;
		width: 100%;
		// display: flex;
		// justify-content: space-between;
		//padding: 32rpx;
		box-sizing: border-box;

		// image {
		// 	width: 64rpx;
		// 	height: 64rpx;
		// }
	}

	.tips-img {
		position: absolute;
		width: 240rpx;
		height: 90rpx;
		top: 30rpx;
		left: 30rpx;
	}

	.item-bottom {
		position: absolute;
		width: 140rpx;
		height: 420rpx;
		right: 20rpx;
		transition: ease-in-out .3s;
	}

	.small-list-page {
		min-height: 60rpx;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		position: absolute;
		z-index: 9999;
		width: 160rpx;
		height: 420rpx;
		box-sizing: border-box;
		background: #c0c2c1;
		border-radius: 0 30rpx 30rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		top: -420rpx;
		padding: 20rpx 10rpx 0 10rpx;
	}

	.scroll-view-item_H:last-child {
		margin-bottom: 0;
	}

	.scroll-view-item_H {
		margin-bottom: 16rpx;

		.scroll-img {
			width: 100%;
			height: 160rpx;
			border-radius: 20rpx;
		}
	}

	.img-page-checked {
		//transform: translateY(-28rpx) scale(1);
		border: 3px solid #4b6e84;
		border-radius: 20rpx;
	}

	.pop {
		position: fixed;
		z-index: 999999;
		top: 50%;
		left: 50%;

		overflow: hidden;

		width: 500rpx;

		transform: translate(-50%, -50%);

		border-radius: 20rpx;
		background-color: #fff;

		.item {
			height: 100rpx;
			padding: 0 50rpx;

			transition: all .2s;

			border-radius: 20rpx;

			line-height: 100rpx;

			&:active {
				background-color: #eee;
			}
		}
	}
</style>